<!-- 1商品信息 -->
<template>
  <!-- 内容区 -->
  <div class="addshop_main">
    <!-- 表单 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo_ruleForm"
    >
      <!-- 表单a line -->
      <div class="ruleForm_one">
        <!-- 商品名称 -->
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请选择商品名称"
          ></el-input>
        </el-form-item>
        <!-- 商品分类 -->
        <el-form-item label="商品分类" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option label="电气" value="electrical"></el-option>
            <el-option label="服装" value="clothing"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 表单Two lines-->
      <div class="ruleForm_one">
        <!-- 商品关键字 -->
        <el-form-item label="商品关键字" prop="crux">
          <el-input
            v-model="ruleForm.crux"
            placeholder="请输入商品关键字"
          ></el-input>
        </el-form-item>
        <!-- 单位 -->
        <el-form-item label="单位" prop="Company">
          <el-input
            v-model="ruleForm.Company"
            placeholder="请输入单位"
            class="el-select"
          ></el-input>
        </el-form-item>
      </div>
      <!-- 表单3 -->
      <div class="ruleForm_tow">
        <!-- 商品介绍 -->
        <el-form-item label="商品介绍" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </div>
      <!-- 商品封面图 -->
      <div class="ruleForm_clss">
        <el-form-item label="商品封面图" prop="descimg">
          <el-upload
            :limit="1"
            action="/upload/tools/saveavatar/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" src="../../../../assets/images/1.jpg" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
      <!-- 轮播图 -->
      <div class="ruleForm_clss">
        <el-form-item label="轮播图" prop="swiperImag">
          <el-upload
            :limit="5"
            action="/upload/tools/saveavatar/"
            list-type="picture-card"
            :auto-upload="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSwiperSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
      <!-- 运费模板 -->
      <div class="ruleForm_fours">
        <el-form-item label="运费模板" prop="freight">
          <el-select v-model="ruleForm.freight" placeholder="请选择">
            <el-option label="包邮" value="shipping"></el-option>
            <el-option label="不包邮" value="nomail"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="changePopout"> 添加模板</el-button>
        <Popout v-show="showFlag" @isShow="isShow"></Popout>
      </div>
    </el-form>
  </div>
</template>

<script>
import Popout from "./Popout";
export default {
  name: "OneShop",
  //import引入的组件需要注入到对象中才能使用
  components: { Popout },
  data() {
    //这里存放数据
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      showFlag: false,
      input: "",
      active: 0,
      imageUrl: "",
      ruleForm: {
        crux: "",
        Company: "",
        name: "",
        region: "",
        desc: "",
        mouder: "",
        freight: "",
        descimg: [],
        swiperImag: []
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { max: 10, message: "长度在 10 个字", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        crux: [
          { required: true, message: "请输入商品关键字", trigger: "blur" },
          { max: 10, message: "长度在 10 个字", trigger: "blur" }
        ],
        Company: [
          { required: true, message: "输入商品", trigger: "blur" },
          { max: 10, message: "长度在 10 个字", trigger: "blur" }
        ],
        desc: [
          { required: true, message: "请填写商品介绍", trigger: "blur" },
          { max: 500, message: "长度在 10 个字", trigger: "blur" }
        ],
        freight: [
          { required: true, message: "请选择运费方式", trigger: "blur" }
        ]
        // descimg: [{ required: true, message: "请选择图片",}],
        // swiperImag: [
        //   { required: true, message: "请选择图片", },
        // ],
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    // 验证
    submitForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate(valid => {
          if (valid) {
            resolve("submit!");
          } else {
            reject("error submit!!");
            return false;
          }
        });
      });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    //图片上传成功实现本地预览1
    handleAvatarSuccess(res, file) {
      this.ruleForm.descimg = URL.createObjectURL(file.raw); //表单获取到提交时要传的图片路径
    },
    //图片上传成功实现本地预览2
    handleSwiperSuccess(res, file) {
      this.ruleForm.swiperImag.push(URL.createObjectURL(file.raw)); //表单获取到提交时要传的图片路径
    },
    // 图片删除
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    // 图片状态
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.response.data.file;
      this.dialogVisible = true;
      console.log(
        "12313213",
        this.dialogVisible,
        1231231313,
        this.dialogImageUrl
      );
    },
    // 添加模板
    changePopout() {
      this.showFlag = true;
    },
    // 添加模板弹框显示
    isShow(e) {
      this.showFlag = e;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang="scss" scoped>
.addshop_main {
  width: 100%;
  height: 100%;
  display: flex;
  .demo_ruleForm {
    flex: 1;
    padding-left: 15px;

    .ruleForm_one {
      display: flex;
      margin-top: 8px;
      margin-bottom: 22px;
      width: 100%;
      height: 40px;

      ::v-deep .el-form-item {
        flex: 1;
        margin-right: 60px;
        font-weight: 900;
        input {
          height: 30px;
        }
        .el-select {
          width: 80%;
        }
      }
    }
    .ruleForm_tow {
      width: 100%;
      height: 60px;
      display: flex;
      margin: 5px 0;
      .el-form-item {
        flex: 1;
        margin-right: 60px;
        font-weight: 900;
        .el-upload--picture-card {
          height: 60px;
          line-height: 60px;
        }
      }
    }
    .ruleForm_clss {
      width: 100%;
      height: 80px;
      display: flex;
      margin: 10px 0;
      overflow: hidden;

      .el-form-item {
        flex: 1;
        ::v-deep .el-form-item__content {
          height: 80px;
          // background: coral;
          div {
            height: 80px;
            padding-left: 5px;
            display: inline-flex;
            .el-upload-list {
              width: 100%;
              height: 80px;
              .el-upload-list__item {
                height: 80px;
                width: 80px;
              }
            }
            .addshop_main
              .demo_ruleForm
              .ruleForm_clss
              .el-form-item[data-v-4e1f1d54]
              .el-form-item__content
              div {
              height: auto;
              background: red;
              .el-upload .el-icon-plus {
                height: 60px;
                width: 60px;
              }
            }

            .el-upload {
              width: 115px;
              height: 60px;
              line-height: 60px;

              .el-icon-plus {
                font-size: 25px;
                line-height: 60px;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }

    .ruleForm_fours {
      width: 100%;
      height: 40px;
      display: flex;
      margin-top: 5px;
      align-items: center;
      ::v-deep .el-form-item {
        margin-bottom: 0;
        flex: 1;
        margin-right: 60px;
        font-weight: 900;

        .el-form-item__content {
          flex: 1;
        }

        ::v-deep .el-input__inner {
          height: 30px;
          width: 200px;
        }
        .el-button {
          margin-right: 60%;
        }
        .el_input {
          margin-right: 60%;
        }
      }
    }
  }
}
</style>
